<template>
	<div>

		<el-collapse v-if="props.collapsable" v-model="activeNames" @change="collapseChanged">
			<el-collapse-item name="form">
				<template #title>
					<cus-form-title :icon="props.icon" :label="props.label" :label-style="props.labelStyle" :show-divider="props.showDivider" :show-icon="props.showIcon"
					                style="margin-bottom: 0">
						<template #after>
							<div v-if="titleButtonVisible" style="margin-left: 20px">
								<slot name="title-after"/>
							</div>
						</template>
						<template #end>
							<div v-if="titleButtonVisible" style="margin-right: 10px">
								<slot name="title-end"/>
							</div>
						</template>
					</cus-form-title>
				</template>
				<slot name="form"/>
			</el-collapse-item>
		</el-collapse>

		<div v-else>
			<cus-form-title :icon="props.icon" :label="props.label" :label-style="props.labelStyle" :show-divider="props.showDivider" :show-icon="props.showIcon">
				<template #after>
					<div style="margin-left: 20px">
						<slot name="title-after"/>
					</div>
				</template>
				<template #end>
					<div style="margin-right: 10px">
						<slot name="title-end"/>
					</div>
				</template>
			</cus-form-title>
			<slot name="form"/>
		</div>

	</div>
</template>

<script lang="ts" setup>
import {ref, type StyleValue} from 'vue'
import CusFormTitle from '@/components/cus-form-title.vue'
import type {CollapseModelValue} from 'element-plus'

const props = withDefaults(defineProps<{
	collapsable?: boolean
	label?: string
	labelStyle?: StyleValue
	icon?: string
	showIcon?: boolean
	showDivider?: boolean
}>(), {
	collapsable: false,
	label: '未命名表单',
	icon: 'fa fa-edit',
	showIcon: true,
	showDivider: true
})

const emits = defineEmits<{
	(e: 'collapseChanged', value: CollapseModelValue): void
}>()

const titleButtonVisible = ref(true)

const activeNames = ref<string[]>(['form'])

const collapseChanged = (val: CollapseModelValue) => {
	titleButtonVisible.value = (<typeof activeNames.value>val).length !== 0
	setTimeout(() => {
		window.dispatchEvent(new Event('resize'))
	}, 500)
}

</script>

<style lang="scss" scoped>
:deep(.el-collapse) {
	border: none;

	.el-collapse-item__header {
		border: none;
	}

	.el-collapse-item__wrap {
		border: none;
		border-radius: var(--el-border-radius-round);
		box-shadow: var(--cus-box-shadow);
	}

	.el-collapse-item__content {
		padding: 15px;
	}
}
</style>
